<template>
  <div class="search-container">
    <el-input
      v-model="searchQuery"
      placeholder="搜索菜品"
      prefix-icon="el-icon-search"
      clearable
      @input="handleSearch"
    >
    </el-input>
    
    <div class="search-results" v-if="searchResults.length">
      <el-card v-for="dish in searchResults" :key="dish.id" class="dish-card">
        <div class="dish-info">
          <img :src="dish.image" class="dish-image">
          <div class="dish-details">
            <h3>{{ dish.name }}</h3>
            <p>{{ dish.description }}</p>
            <div class="bottom">
              <span class="price">¥{{ dish.price }}</span>
              <el-button type="primary" size="small" @click="addToCart(dish)">
                加入购物车
              </el-button>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    
    <div v-else-if="searchQuery" class="no-results">
      没有找到相关菜品
    </div>
  </div>
</template>

<script>
export default {
  name: 'DishSearch',
  data() {
    return {
      searchQuery: ''
    }
  },
  computed: {
    searchResults() {
      if (!this.searchQuery) return []
      return this.$store.state.dishes.filter(dish => 
        dish.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
        dish.description.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  },
  methods: {
    handleSearch() {
      // 实时搜索，无需额外处理
    },
    addToCart(dish) {
      this.$store.commit('addToCart', dish)
      this.$message.success('已添加到购物车')
    }
  }
}
</script>

<style scoped>
.search-container {
  padding: 20px;
}
.search-results {
  margin-top: 20px;
}
.dish-card {
  margin-bottom: 15px;
}
.dish-info {
  display: flex;
}
.dish-image {
  width: 120px;
  height: 120px;
  object-fit: cover;
}
.dish-details {
  margin-left: 20px;
  flex: 1;
}
.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price {
  font-size: 18px;
  color: #f56c6c;
  font-weight: bold;
}
.no-results {
  text-align: center;
  margin-top: 40px;
  color: #909399;
}
</style> 